<template>
	<view class="u-flex">
		<!-- 左侧的 tab 页签 -->
		<scroll-view class="scroll_view" scroll-y="true">
			<view
				class="cat_list oneLine-noWrap"
				:class="{
					choosed_goods: choosed_goods.id == item.id
				}"
				v-for="item in cat_list"
				:key="item.id"
				@click="choose(item)"
			>
				{{ item.name }}
			</view>
		</scroll-view>

		<view class="u-flex-1 goods_box">
			<scroll-view scroll-y="true" class="goods_box_scroll">
				<view class="u-flex u-flex-wrap">
					<view v-for="item in goods_list" :key="item.id" @click="goto_details(item)" class="u-margin-left-20 u-margin-bottom-10">
						<u-image :border-radius="10" :src="item.img" height="300" width="300" :lazy-load="true" :fade="true" duration="300" mode="aspectFill">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<text class="good_name u-margin-top-8 oneLine-noWrap">{{ item.good_name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			choosed_goods: {}, // 被选中的商品对象
			goods_list: [], // 商品列表
			cat_list: [] // 商品分类列表
		};
	},
	async onLoad() {
		let cat_list = await this.$u.api.cat_list({ groupid: 1 });
		this.cat_list = cat_list.list;
		if (this.cat_list.length > 0) {
			this.choosed_goods = this.cat_list[0];
			this._choosed_goods();
		}
	},
	methods: {
		goto_details(item) {
			this.$u.route({
				url: 'pages/goods/goods_info',
				params: {
					id: item.id
				}
			});
		},
		_choosed_goods() {
			this.$u.api.goods_list({ page: 1, cat_id: this.choosed_goods.id }).then(res => {
				this.goods_list = res.list;
			});
		},
		choose(item) {
			this.choosed_goods = item;
			this._choosed_goods();
		}
	}
};
</script>

<style lang="scss" scoped>
.good_name {
	width: 250rpx;
	text-align: center;
	font-size: 32rpx;
}
.choosed_goods {
	color: #ffffff;
	background-color: #ff9900;
	font-weight: 700;
}
.cat_list {
	text-align: left;
	border-bottom: 1rpx #eee solid;
	padding: 30rpx 10rpx;
	transition: all 0.3s;
}
.goods_box_scroll {
	height: 100%;
	background-color: #ffffff;
	padding: 0rpx 10rpx;
}
.goods_box {
	height: 100vh;
}
.scroll_view {
	height: 100vh;
	width: 140rpx;
	background-color: #ffffff;
	border-right: 1rpx #eee solid;
}
</style>
